"use client"
import React from 'react'
import { useState } from 'react';
import TABLE from '../../system/Content/page'
import { Rate } from 'antd';
import { Button } from 'antd';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import {
  Form,
  Input,
  Select,
  DatePicker,
  Checkbox
} from 'antd';

export const setcheck=()=>{

}
export const columns = [
  {
    title: '客户名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '客户状态',
    dataIndex: 'flag',
    key: 'flag',
  },
  {
    title: '客户星级',
    dataIndex: 'xing',
    key: 'xing',
    render: (_: any, content: any) => {
      return <div>
        <Rate disabled defaultValue={content.xing} />
      </div>
    }
  },
  {
    title: '首联系人',
    dataIndex: 'lian',
    key: 'lian',
  },
  {
    title: '手机号码',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '最后跟进',
    dataIndex: 'time',
    key: 'time',
  },
  {
    title: '未跟进天数',
    dataIndex: 'day',
    key: 'day',
  },
  {
    title: 'Action',
    key: 'action',
    render: (_: any, content: any) => {
      return <div>
        <Button>跟进</Button>
        <Button>编辑</Button>
        <Button>置顶</Button>
        <Button>删除</Button>
      </div>
    }
  },
];
export const data = [
  {
    key: '1',
    name: 'John Brown',
    flag: "正在跟进",
    xing: '4',
    lian: "张三",
    phone: "110",
    time: "2018-08-25 14:54",
    day: "30"
  },
  {
    key: '2',
    name: 'John Brown',
    flag: "正在跟进",
    xing: '3',
    lian: "张三",
    phone: "110",
    time: "2018-08-25 14:54",
    day: "30"
  },
  {
    key: '3',
    name: 'John Brown',
    flag: "正在跟进",
    xing: '5',
    lian: "张三",
    phone: "110",
    time: "2018-08-25 14:54",
    day: "30"
  },
];
export const items: TabsProps['items'] = [
  {
    key: '1',
    label: '全部客户',
  },
  {
    key: '2',
    label: '我的客户',
  },
  {
    key: '3',
    label: '下属客户',
  },
  {
    key: '4',
    label: '重点客户',
  },
  {
    key: '5',
    label: '我协作的',
  },
  {
    key: '6',
    label: '下属协作的',
  },
];
export const current = {
  defaultPageSize: 2,
  pageSizeOptions: [2, 4, 6, 8],
  showSizeChanger: true,
  total: data.length
}
function page() {
  const onChange = (key: string) => {
    console.log(key);
  };
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
 const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
  console.log('selectedRowKeys changed: ', newSelectedRowKeys);
  setSelectedRowKeys(newSelectedRowKeys);
};

 const rowSelection = {
  selectedRowKeys,
  onChange: onSelectChange,
};
  return (
    <div>
      <Tabs
        onChange={onChange}
        type="card"
        items={items}
      />
      <Form
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 14 }}
        layout="horizontal"
        style={{ maxWidth: "auto", display: "flex", alignItems: "center", justifyContent: "space-around" }}
      >
        <Form.Item label="" style={{ maxWidth: "auto" }}>
          <Input placeholder='搜索关键词' style={{ minWidth: "180px" }} />
        </Form.Item>
        <Form.Item label="">
          <Select placeholder='客户状态' style={{ minWidth: "180px" }}>
            <Select.Option value="demo">Demo</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="">
          <Select placeholder='客户类型' style={{ minWidth: "180px" }}>
            <Select.Option value="demo">Demo</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="">
          <Select placeholder='客户星级' style={{ minWidth: "180px" }}>
            <Select.Option value="demo">Demo</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="">
          <DatePicker placeholder='最后跟进' style={{ minWidth: "180px" }} />
        </Form.Item>
        <Form.Item label="" style={{ display: "flex" }}>
          <div style={{ display: "flex" }}>
            <Button type="primary">查询</Button>
            <Button>重置</Button>
          </div>
        </Form.Item>
        <Form.Item label="">
          <Button>高级筛选</Button>
        </Form.Item>
      </Form>
      <div style={{display:"flex",justifyContent:"space-between"}}>
        <div>
          <Button type="primary">添加</Button>
          <Button>导入</Button>
          <Button>导出</Button>
          <Button>新建任务</Button>
          <Button>转移客户</Button>
          <Button>移入公海</Button>
          <Button>合并客户</Button>
          <Button>批量编辑</Button>
        </div>
        <div>
          <span>跟进模式</span>
          <Button>排序</Button>
          <Button>列表</Button>
        </div>
      </div>

      <TABLE rowSelection={rowSelection} data={data} columns={columns} current={current}></TABLE>
      <div>
      <Button>全选</Button>
      <Button>反选</Button>
      <Button>更多操作</Button>
      </div>
    </div>
  )
}

export default page
